<template>
	<view>
		<view class="detail_top">
			<view style="line-height: 50rpx;font-weight: bold;">APPOINTMENTINFORMATION</view>
			<view style="line-height: 30rpx;">/ 预约人详情 /</view>
		</view>
		<view style="padding: 44rpx;">
			<u--form
					labelPosition="left"
					:model="model1"
					labelWidth="100"
					ref="uForm"
			>
				<u-form-item
						label="姓名"
						prop="userInfo.name"
						borderBottom
						ref="item1"
				>
					<u--input
							v-model="model1.userInfo.name"
							placeholder="请输入预约人姓名"
							border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="手机号码"
						prop="userInfo.name"
						borderBottom
				>
					<u--input
							v-model="model1.userInfo.name"
							placeholder="请输入手机号码"
							border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="备注"
						prop="userInfo.name"
						borderBottom
				>
					<u--input
							v-model="model1.userInfo.name"
							placeholder="请输入备注信息【选填】"
							border="none"
					></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="detail_top">
			<view style="line-height: 50rpx;font-weight: bold;">APPOINTMENTINFORMATION</view>
			<view style="line-height: 30rpx;">/ 预约详情 /</view>
		</view>
		<view style="padding: 44rpx;">
			<u--form
					labelPosition="left"
					:model="model1"
					labelWidth="100"
					ref="uForm2"
			>
				<u-form-item
						label="门店"
						prop="userInfo.sex"
						borderBottom
						ref="item1"
				>
					<u--input
							v-model="model1.userInfo.sex"
							placeholder="请选择预约门店"
							border="none"
					></u--input>
					<u-icon
							slot="right"
							name="arrow-right"
					></u-icon>
				</u-form-item>
				<u-form-item
						label="项目"
						prop="userInfo.sex"
						borderBottom
						ref="item1"
				>
					<u--input
							v-model="model1.userInfo.sex"
							placeholder="请选择预约项目"
							border="none"
					></u--input>
					<u-icon
							slot="right"
							name="arrow-right"
					></u-icon>
				</u-form-item>
				<u-form-item
						@click="showTime=true;"
						label="预约时间"
						prop="userInfo.sex"
						borderBottom
						ref="item1"
				>
					<u--input
							v-model="model1.userInfo.time"
							placeholder="请选择预约时间"
							border="none"
					></u--input>
					<u-icon
							slot="right"
							name="arrow-right"
					></u-icon>
				</u-form-item>
			</u--form>
		</view>
		<view class="submit_footer">
			<view class="text">
				预约注意事项：预约注意事项提示预约注意事项提示预约注意事项提示预约 注意事项提示预约注意事项提示预约注意事项提示预约注意事项提示
			</view>
			<view class="btn">提交</view>
		</view>
			<u-popup :show="showTime" mode="bottom">
			        <its-calendar :sta_num="8" :end_num="18" :int_num="60" @getTime="TimeData"></its-calendar>
			</u-popup>
	</view>
</template>

<script>
	import itsCalendar from '@/components/its-calendar/its-calendar.vue';

	export default {
		components: {
			itsCalendar
		},
		data() {
			return {
				showTime:false,
				model1: {
					userInfo: {
						name: '',
						sex: '',
						time:''
					},
				},
			};
		},
		methods:{
			TimeData(e){
				console.log(e)
				this.showTime=false;
				this.model1.userInfo.time=e.weeks+e.hours
			}
		}
	}
</script>

<style lang="scss" scoped>
.detail_top{
	width: 750rpx;
	height: 107rpx;
	background: #FFFFFF;
	margin-top: 7rpx;
	font-size: 20rpx;
	text-align: center;
}
.submit_footer{
	width: 100%;
	height: 313rpx;
	background: #FFFFFF;
	position: fixed;
	bottom: 0rpx;
	padding: 49rpx;
	left: 0rpx;
	.text{
		width: 660rpx;
		height: 78rpx;
		font-size: 20rpx;
		font-weight: 400;
		color: #FF7575;
		line-height: 39rpx;
	}
	.btn{
		width: 656rpx;
		height: 90rpx;
		background: #000000;
		border-radius: 10rpx;
		color: #FDCE9A;
		line-height: 90rpx;
		text-align: center;
		font-size: 20rpx;
		margin-top: 75rpx;
	}
}
</style>
